/* 学习目标：掌握动态路由的基本使用  */

import {
  BrowserRouter as Router,
  Link,
  NavLink,
  Route,
  Routes,
  Navigate,
} from 'react-router-dom';
import './index.css';

import React from 'react';
import Find from './components/Find';
import Home from './components/Home';
import My from './components/My';
import Child1 from './components/Child1';
import Child2 from './components/Child2';
import Child3 from './components/Child3';
import Friend from './components/Friend';

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/home">点我跳转-首页</Link>
        <br />
        <NavLink to="/home">点我跳转-首页NavLink</NavLink>
        <br />
        <Link to="/find">点我跳转-发现</Link>
        <br />
        <Link to="/my">点我跳转-我的</Link>
        <br />
        <Link to="/friend">点我跳转-朋友</Link>
        <br />
        <Routes>
          <Route path="/" element={<Navigate to="/home" />} />
          <Route path="/home" element={<Home />} />
          {/* 1. 将路由改造为动态路由 */}
          <Route path="/friend/:xxx" element={<Friend />} />
          <Route path="/find" element={<Find />}>
            <Route index element={<Child1 />} />
            <Route path="child2" element={<Child2 />} />
            <Route path="child3" element={<Child3 />} />
          </Route>
          <Route path="/my/*" element={<My />} />
        </Routes>
      </div>
    </Router>
  );
}
